<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { store } from '../store.js'

// 获取路由参数
const route = useRoute()
const gameId = route.params.id

// 模拟游戏数据
const gameData = ref({
  id: gameId,
  name: '未知游戏',
  price: '¥0.00',
  originalPrice: '¥0.00',
  discount: 0,
  rank: 0,
  rating: 0,
  favoriteCount: 0,
  playtime: 0,
  description: '暂无游戏描述',
  tags: [],
  releaseDate: '',
  developer: '',
  publisher: '',
  images: [],
  comments: []
})

// 模拟获取游戏数据
const fetchGameData = () => {
  // 根据ID返回不同的游戏数据
  const mockGames = {
    '1': {
      id: '1',
      name: '赛博朋克 2077',
      price: '¥199.00',
      originalPrice: '¥298.00',
      discount: 33,
      rank: 1,
      rating: 9.2,
      favoriteCount: 1254680,
      playtime: 45,
      description: '《赛博朋克 2077》是一款开放世界动作冒险游戏，故事发生在夜之城，这是一座五光十色的大都会，权力更迭和身体改造是不变的主题。扮演一名野心勃勃的雇佣兵：V，追寻一种独一无二的植入体，获得永生的关键。','tags': ['开放世界', '科幻', '角色扮演', '单人'],
      releaseDate: '2020-12-10',
      developer: 'CD Projekt Red',
      publisher: 'CD Projekt Red',
      images: [
        'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg',
        'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/ss_8c57713e33d6542e632245e916b2978dd6e177a8.jpg',
        'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/ss_2b88a622b8b16d8ff2a93bd6b26b130c79ff60e6.jpg'
      ],
      comments: [
        {
          id: 1,
          user: '夜之城传奇',
          avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
          content: '虽然发售初期问题很多，但经过多次更新后游戏体验已经非常好了。剧情深入人心，夜之城的氛围营造得很到位。',
          time: '2小时前',
          likes: 568
        },
        {
          id: 2,
          user: 'V的追随者',
          avatar: 'https://randomuser.me/api/portraits/women/45.jpg',
          content: '银手强尼的魅力无法抵挡！每次玩都能发现新的剧情细节，值得反复探索。',
          time: '5小时前',
          likes: 342
        },
        {
          id: 3,
          user: '赛博爱好者',
          avatar: 'https://randomuser.me/api/portraits/men/78.jpg',
          content: '武器和义体系统非常有深度，不同的搭配能玩出完全不同的风格。希望未来能有更多DLC。',
          time: '昨天',
          likes: 287
        }
      ]
    },
    '2': {
      id: '2',
      name: '艾尔登法环',
      price: '¥298.00',
      originalPrice: '¥298.00',
      discount: 0,
      rank: 2,
      rating: 9.6,
      favoriteCount: 987654,
      playtime: 68,
      description: '《艾尔登法环》是一款由FromSoftware开发、万代南梦宫发行的动作角色扮演游戏。玩家将扮演"褪色者"，在"交界地"展开冒险，寻找"艾尔登法环"，成为新的艾尔登之王。',
      tags: ['开放世界', '动作', '角色扮演', '多人'],
      releaseDate: '2022-02-25',
      developer: 'FromSoftware',
      publisher: 'Bandai Namco Entertainment',
      images: [
        'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/header.jpg',
        'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/ss_5817e34f8cf23d189642f84c85896c0853a5574c.jpg',
        'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/ss_2e32f76bfb0c7c32bb07a92a9ce7e29a4897bf8e.jpg'
      ],
      comments: [
        {
          id: 1,
          user: '不死人',
          avatar: 'https://randomuser.me/api/portraits/men/65.jpg',
          content: '黑魂系列爱好者狂喜！开放世界设计得非常精妙，每个角落都充满惊喜，BOSS战依然那么硬核但又充满成就感。',
          time: '1天前',
          likes: 876
        },
        {
          id: 2,
          user: '黄金树的信徒',
          avatar: 'https://randomuser.me/api/portraits/women/22.jpg',
          content: '美术风格太震撼了，每个区域都有独特的氛围。剧情虽然隐晦，但细细品味非常有深度。',
          time: '2天前',
          likes: 654
        },
        {
          id: 3,
          user: '交界地漫游者',
          avatar: 'https://randomuser.me/api/portraits/men/44.jpg',
          content: '新手友好度比以前的作品高了一些，但依然需要耐心学习。值得花时间深入探索的好游戏。',
          time: '3天前',
          likes: 432
        }
      ]
    },
    '3': {
      id: '3',
      name: '死亡搁浅：导演剪辑版',
      price: '¥198.00',
      originalPrice: '¥248.00',
      discount: 20,
      rank: 3,
      rating: 9.2,
      favoriteCount: 6517,
      playtime: 28.9,
      description: '《死亡搁浅：导演剪辑版》由小岛秀夫打造，以其独特的"联结"主题和创新玩法闻名。游戏以送货为核心，同时融合了探索、战斗和深刻的叙事元素。在这款重制版本中，玩家将体验更多新增内容，包括竞速模式、新武器和载具。',
      tags: ['开放世界', '动作', '冒险', '单人', '剧情丰富', '步行模拟'],
      releaseDate: '2021-09-24',
      developer: 'Kojima Productions',
      publisher: '505 Games',
      images: [
        'https://cdn.cloudflare.steamstatic.com/steam/apps/1850620/header.jpg',
        'https://cdn.cloudflare.steamstatic.com/steam/apps/1850620/ss_1a61bd6b733c6c4d39dd03319b1d81ce375b1577.jpg',
        'https://cdn.cloudflare.steamstatic.com/steam/apps/1850620/ss_e7ddb400d55297b1572c4f9cf87b9916dd52b5f3.jpg'
      ],
      comments: [
        {
          id: 1,
          user: '山姆·布里奇斯',
          avatar: 'https://randomuser.me/api/portraits/men/35.jpg',
          content: '小岛秀夫的艺术作品！剧情深邃，音乐震撼，每个角色都令人印象深刻。送货虽然看起来单调，但实际上非常有成就感。',
          time: '5小时前',
          likes: 2345
        },
        {
          id: 2,
          user: 'UCA快递员',
          avatar: 'https://randomuser.me/api/portraits/women/42.jpg',
          content: '导演剪辑版新增的竞速模式非常有趣，大大增加了游戏的可玩性。画面和优化也有很大提升。',
          time: '1天前',
          likes: 1678
        },
        {
          id: 3,
          user: '亡人',
          avatar: 'https://randomuser.me/api/portraits/men/56.jpg',
          content: '"联结"的主题贯穿整个游戏，在当今社会显得尤为有意义。游戏节奏较慢，适合喜欢沉浸式体验的玩家。',
          time: '2天前',
          likes: 1234
        }
      ]
    }
  }
  
  // 如果找不到对应ID的游戏，返回第一个游戏
  gameData.value = mockGames[gameId] || mockGames['1']
}

onMounted(() => {
  fetchGameData()
})

// 添加到购物车
const addToCart = () => {
  store.addToCart(gameData.value)
}

// 添加到愿望单
const addToWishlist = () => {
  store.addToWishlist(gameData.value)
}
</script>

<template>
  <div class="game-detail">
    <!-- 游戏基本信息 -->
    <section class="game-header">
      <div class="header-content">
        <div class="game-images">
          <img :src="gameData.images[0]" alt="游戏封面" class="main-image" />
          <div class="thumbnail-list">
            <img v-for="(img, index) in gameData.images" :key="index" :src="img" :alt="`游戏截图${index + 1}`" class="thumbnail" />
          </div>
        </div>
        <div class="game-info">
          <h1 class="game-title">{{ gameData.name }}</h1>
          <div class="game-meta">
            <span class="rank">热度排名 #{{ gameData.rank }}</span>
            <span class="rating">评分 {{ gameData.rating }}/10</span>
            <span class="favorite">喜爱人数 {{ gameData.favoriteCount.toLocaleString() }}</span>
          </div>
          <div class="price-section">
            <div class="price-display">
              <span v-if="gameData.discount > 0" class="discount">{{ gameData.discount }}% OFF</span>
              <span class="current-price">{{ gameData.price }}</span>
              <span v-if="gameData.discount > 0" class="original-price">{{ gameData.originalPrice }}</span>
            </div>
            <button class="buy-btn" @click="addToCart">加入购物车</button>
          <button class="wishlist-btn" @click="addToWishlist">添加愿望单</button>
          </div>
          <div class="game-tags">
            <span v-for="tag in gameData.tags" :key="tag" class="tag">{{ tag }}</span>
          </div>
          <div class="game-stats">
            <p><strong>发行日期：</strong>{{ gameData.releaseDate }}</p>
            <p><strong>开发商：</strong>{{ gameData.developer }}</p>
            <p><strong>发行商：</strong>{{ gameData.publisher }}</p>
            <p><strong>平均游玩时间：</strong>{{ gameData.playtime }} 小时</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 游戏描述 -->
    <section class="game-description">
      <h2>游戏简介</h2>
      <p>{{ gameData.description }}</p>
    </section>

    <!-- 游戏评论 -->
    <section class="game-comments">
      <h2>最新评论</h2>
      <div class="comment-list">
        <div v-for="comment in gameData.comments" :key="comment.id" class="comment-item">
          <img :src="comment.avatar" alt="用户头像" class="user-avatar" />
          <div class="comment-content">
            <div class="comment-header">
              <span class="username">{{ comment.user }}</span>
              <span class="comment-time">{{ comment.time }}</span>
            </div>
            <p class="comment-text">{{ comment.content }}</p>
            <div class="comment-actions">
              <button class="like-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                </svg>
                {{ comment.likes }}
              </button>
              <button class="reply-btn">回复</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 相关推荐 -->
    <section class="related-games">
      <h2>相关推荐</h2>
      <div class="related-list">
        <div v-for="i in 4" :key="i" class="related-item">
          <img :src="`https://cdn.cloudflare.steamstatic.com/steam/apps/${[730, 1086940, 1716740, 2220330][i-1]}/capsule_231x87.jpg`" alt="相关游戏" class="related-image" />
          <div class="related-info">
              <h3>{{ ['Counter-Strike 2', '极限竞速：地平线5', '原神', '星空'][i-1] }}</h3>
              <p class="related-price">{{ ['¥88.00', '¥198.00', '免费', '¥298.00'][i-1] }}</p>
            </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.game-detail {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #121212;
  color: #ffffff;
  min-height: 100vh;
}

/* 游戏头部信息 */
.game-header {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  gap: 30px;
}

.game-images {
  flex: 1;
  max-width: 50%;
}

.main-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.thumbnail {
  width: 120px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.thumbnail:hover {
  opacity: 0.8;
}

.game-info {
  flex: 1;
}

.game-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #ffffff;
}

.game-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #b0b0b0;
}

.rank {
  color: #ff4757;
  font-weight: bold;
}

.rating {
  color: #f39c12;
  font-weight: bold;
}

.favorite {
  color: #3498db;
}

.price-section {
  margin-bottom: 20px;
}

.price-display {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.discount {
  background-color: #e74c3c;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: bold;
}

.current-price {
  font-size: 24px;
  font-weight: bold;
  color: #ff4757;
}

.original-price {
  font-size: 16px;
  color: #666;
  text-decoration: line-through;
}

.buy-btn,
.wishlist-btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-right: 10px;
  margin-bottom: 10px;
}

.buy-btn {
  background-color: #ff4757;
  color: white;
}

.buy-btn:hover {
  background-color: #ff3742;
  transform: translateY(-1px);
}

.wishlist-btn {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.wishlist-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.tag {
  background: rgba(255, 255, 255, 0.1);
  color: #d0d0d0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
}

.game-stats p {
  margin: 8px 0;
  font-size: 14px;
  color: #b0b0b0;
}

/* 游戏描述 */
.game-description {
  margin-bottom: 30px;
}/* 游戏描述 */
.game-description h2 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #ffffff;
}

.game-description p {
  font-size: 16px;
  line-height: 1.8;
  color: #d0d0d0;
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 游戏评论 */
.game-comments {
  margin-bottom: 30px;
}/* 游戏评论 */
.game-comments h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #ffffff;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.username {
  font-weight: bold;
  color: #ffffff;
}

.comment-time {
  font-size: 12px;
  color: #7f8c8d;
}

.comment-text {
  margin-bottom: 10px;
  line-height: 1.6;
  color: #d0d0d0;
}

.comment-actions {
  display: flex;
  gap: 15px;
}

.like-btn,
.reply-btn {
  background: none;
  border: none;
  color: #7f8c8d;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s;
}

.like-btn:hover,
.reply-btn:hover {
  color: #ff4757;
}

/* 相关推荐 */
.related-games {
  margin-bottom: 30px;
}/* 相关推荐 */
.related-games h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #ffffff;
}

.related-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.related-item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
  cursor: pointer;
}

.related-item:hover {
  transform: translateY(-5px);
}

.related-image {
  width: 100%;
  height: 113px;
  object-fit: cover;
}

.related-info {
  padding: 10px;
}

.related-info h3 {
  font-size: 14px;
  margin-bottom: 5px;
  color: #ffffff;
}

.related-price {
  font-size: 16px;
  font-weight: bold;
  color: #e74c3c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
  }
  
  .game-images {
    max-width: 100%;
  }
  
  .related-list {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .game-meta {
    flex-wrap: wrap;
  }
  
  .buy-btn,
  .wishlist-btn {
    width: 100%;
    margin-right: 0;
  }
}
</style>